<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    class CustomTextInput extends React.Component {
        constructor(props) {
            super(props);
            this.focus = this.focus.bind(this);
        }

        focus() {
            // Explicitly focus the text input using the raw DOM API
            this.textInput.focus();
            this.buttonInput.value = "Focused the text input";
        }

        componentDidMount(){
            this.textInput.focus();
        }

        render() {
            // Use the `ref` callback to store a reference to the text input DOM
            // element in an instance field (for example, this.textInput).
            return (
                    <div>
                        <input
                                type="text"
                                ref={(input) => { this.textInput = input; }}
                        />
                        <input
                                type="button"
                                value="Focus the text input"
                                ref={(input) => {this.buttonInput = input; }}
                                onClick={this.focus}
                        />
                    </div>
            );
        }
    }


    ReactDOM.render(<CustomTextInput/>, document.getElementById("example"));

</script>
</body>
</html>

